import {GridContent, PageLoading, ProColumns, ProTable} from '@ant-design/pro-components';
import * as React from 'react';
import {FC, Suspense, useState} from "react";
import ChinaMap from "@/pages/dashboard/statistics/components/Map";
import {Card, Col, Progress, Row, Statistic, Tooltip, Table, Button} from "antd";
import {Gauge, Liquid, WordCloud, Pie, Column, Tiny, Area} from "@ant-design/plots";
import {useRequest} from "@@/exports";
import {ChartCard, Field} from "./components/Charts";
import {statisticsContract, statisticsDataCenterList, statisticsOverview} from "@/pages/dashboard/statistics/service";
import {DataCenterItem} from "@/pages/dashboard/statistics/data";

const topColResponsiveProps = {
    xs: 24,
    sm: 12,
    md: 12,
    lg: 12,
    xl: 6,
    style: {
        marginBottom: 24,
    },
};
const dataSource = [
    {
        key: '1',
        name: '北京太和桥4090',
        age: 32,
        address: '2398P',
    },
    {
        key: '2',
        name: '北京望京H800',
        age: 42,
        address: '2398P',
    },
];

const columns: ProColumns<DataCenterItem>[] = [
    {
        title: '名称',
        dataIndex: 'dataCenterName',
    },
    {
        title: '主机数',
        dataIndex: ['hostComputer', 'total'],
        renderText: (val: number) => `${val}台`,
    },
    {
        title: '算力',
        dataIndex:['hashrate', 'total'],
        renderText: (val: number) => `${val}P`,
    },
];

const contractRemindColumns = [
    {
        title: '租户名称',
        dataIndex: 'organizationName',
        key: 'organizationName',
    },
    {
        title: '联系人',
        dataIndex: 'contactName',
        key: 'contactName',
    },
    {
        title: '联系电话',
        dataIndex: 'contactPhone',
        key: 'contactPhone',
    },
    {
        title: '到期日',
        dataIndex: 'contractEndTime',
        key: 'contractEndTime',
    },
];
const Statistics: FC = () => {
    const {loading, data} = useRequest(statisticsOverview);
    const {loading: customLoading, data: customData} = useRequest(statisticsContract);
    const getDiff = (total:number, sell:number) => {
        let diff  = total - sell
        return `${diff}`;
    };
    const [contractRemindVisible, handleContractRemindVisible] = useState<boolean>(true);
    return (
        <GridContent>
            <>
                <Row gutter={24}>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            title="总算力"
                            loading={loading}
                            total={data?.hashrate.total+`P`}
                            footer={
                                <Field
                                    label="可出售算力"
                                    value={
                                        getDiff(data?.hashrate.total || 0, data?.hashrate.sell || 0) + `P`
                                    }
                                />
                            }
                            contentHeight={46}
                        >
                            <Progress percent={data?.hashrate.sellPercent} strokeColor={{from: '#108ee9', to: '#87d068'}} status="active"/>
                        </ChartCard>
                    </Col>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            loading={loading}
                            title="主机数"
                            total={
                                data?.hostComputer.total + `台`
                            }
                            footer={
                                <Field
                                    label="剩余可出售"
                                        value={
                                        getDiff(data?.hostComputer.total || 0, data?.hostComputer.sell || 0) + `台`
                                    }
                                />
                            }
                            contentHeight={46}
                        >
                            <Progress percent={data?.hostComputer.sellPercent} strokeColor={{from: '#108ee9', to: '#87d068'}} status="active"/>
                        </ChartCard>
                    </Col>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            loading={loading}
                            title="存储"
                            total={
                                data?.storage.total
                            }
                            footer={
                                <Field
                                    label="剩余可出售约"
                                    value={data?.storage.lave}
                                />
                            }
                            contentHeight={46}
                        >
                            <Progress percent={data?.storage.sellPercent} strokeColor={{from: '#108ee9', to: '#87d068'}} status="active"/>
                        </ChartCard>
                    </Col>
                    <Col {...topColResponsiveProps}>
                        <ChartCard
                            bordered={false}
                            loading={customLoading}
                            title="签约机构数"
                            total={customData?.total}
                            footer={
                                <Field label="到期提醒" value={
                                    <a
                                        key="remind"
                                        onClick={() => {
                                            handleContractRemindVisible(!contractRemindVisible)
                                        }}
                                    >
                                        {customData?.remind}
                                    </a>
                                }/>
                            }
                            contentHeight={46}
                        >
                            <Column
                                xField="x"
                                yField="y"
                                padding={-20}
                                axis={false}
                                height={46}
                                data={customData?.list}
                                scale={{x: {paddingInner: 0.4}}}
                            />
                        </ChartCard>
                    </Col>


                </Row>
                <Row hidden={contractRemindVisible} gutter={24}>
                    <Col xl={24} lg={24} md={24} sm={24} xs={24} style={{marginBottom: 24,}}>
                        <Card title="合同到期预警" bordered={false}>
                            <Table dataSource={customData?.remindList} columns={contractRemindColumns} />
                        </Card>
                    </Col>

                </Row>
                <Row gutter={24}>
                    <Col xl={16} lg={24} md={24} sm={24} xs={24} style={{marginBottom: 24,}}>
                        <Card title="资源池分布" bordered={false}>
                            <div>
                                <ChinaMap/>
                            </div>
                        </Card>
                    </Col>
                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                        <Card
                            title="资源池列表"
                            style={{
                                marginBottom: 24,
                                height: 555,
                            }}
                            bordered={false}
                        >
                            <ProTable<DataCenterItem, API.ListPagination>
                                rowKey="dataCenterId"
                                search={false}
                                scroll={{x: true}}
                                toolBarRender={false}
                                request={statisticsDataCenterList}
                                columns={columns}
                                rowSelection={false}
                            />
                        </Card>
                    </Col>
                </Row>

            </>
        </GridContent>
    );
}
export default Statistics;

